<template>
    <section class="rankAdjustment">
        <div class="outCard">
            <el-steps :active="currentStep" align-center style="height: 194px;padding: 30px 0 25px 0">
                <el-step >
                    <template slot="icon">
                        <el-image src="static/rankProgress/stepOne.png"></el-image>
                    </template>
                    <template slot="title">
                        <el-image src="static/rankProgress/passRelease.png" class="stepTitle" v-if="currentStep>0"></el-image>
                        <el-image src="static/rankProgress/currentRelease.png" class="stepTitle" v-if="currentStep==0"></el-image>
                        <el-image src="static/rankProgress/release.png" class="stepTitle" v-if="currentStep<0"></el-image>
                        <el-image :src="currentStep > 0?stepArrowSrcActive:stepArrowSrc" class="stepArrow"></el-image>
                        <div class="stepDes" v-if="currentStep==0">发布</div>
                        <div v-else>发布</div>
                    </template>
                </el-step>
                <el-step >
                    <template slot="icon">
                        <el-image src="static/rankProgress/stepTwo.png"></el-image>
                    </template>
                    <template slot="title">
                        <el-image src="static/rankProgress/passApply.png" class="stepTitle" v-if="currentStep>1" @click="stepDetails(1)"></el-image>
                        <el-image src="static/rankProgress/currentApply.png" class="stepTitle" v-if="currentStep==1" @click="stepDetails(1)"></el-image>
                        <el-image src="static/rankProgress/apply.png" class="stepTitle" v-if="currentStep<1"></el-image>
                        <el-image :src="currentStep > 1?stepArrowSrcActive:stepArrowSrc" class="stepArrow"></el-image>
                        <div class="stepDes" v-if="currentStep==1">个人申请</div>
                        <div v-else>个人申请</div>
                    </template>
                </el-step>
                <el-step>
                    <template slot="icon">
                        <el-image src="static/rankProgress/stepThree.png"></el-image>
                    </template>
                    <template slot="title">
                        <el-image src="static/rankProgress/passTownCheck.png" class="stepTitle" v-if="currentStep>2" @click="stepDetails(2)"></el-image>
                        <el-image src="static/rankProgress/currentTownCheck.png" class="stepTitle" v-if="currentStep==2" @click="stepDetails(2)"></el-image>
                        <el-image src="static/rankProgress/townCheck.png" class="stepTitle" v-if="currentStep<2"></el-image>
                        <el-image :src="currentStep > 2?stepArrowSrcActive:stepArrowSrc" class="stepArrow"></el-image>
                        <div class="stepDes" v-if="currentStep==2">考察审查</div>
                        <div v-else>考察审查</div>
                    </template>
                </el-step>
                <el-step>
                    <template slot="icon">
                        <el-image src="static/rankProgress/stepFour.png"></el-image>
                    </template>
                    <template slot="title">
                        <el-image src="static/rankProgress/passTownMeet.png" class="stepTitle" v-if="currentStep>3" @click="stepDetails(3)"></el-image>
                        <el-image src="static/rankProgress/currentTownMeet.png" class="stepTitle" v-if="currentStep==3" @click="stepDetails(3)"></el-image>
                        <el-image src="static/rankProgress/townMeet.png" class="stepTitle" v-if="currentStep<3"></el-image>
                        <el-image :src="currentStep > 3?stepArrowSrcActive:stepArrowSrc" class="stepArrow"></el-image>
                        <div class="stepDes" v-if="currentStep==3">镇党委会研究</div>
                        <div v-else>镇党委会研究</div>
                    </template>
                </el-step>
                <el-step>
                    <template slot="icon">
                        <el-image src="static/rankProgress/stepFive.png"></el-image>
                    </template>
                    <template slot="title">
                        <el-image src="static/rankProgress/passCityCheck.png" class="stepTitle" v-if="currentStep>4" @click="stepDetails(4)"></el-image>
                        <el-image src="static/rankProgress/currentCityCheck.png" class="stepTitle" v-if="currentStep==4" @click="stepDetails(4)"></el-image>
                        <el-image src="static/rankProgress/cityCheck.png" class="stepTitle" v-if="currentStep<4"></el-image>
                        <el-image :src="currentStep > 4?stepArrowSrcActive:stepArrowSrc" class="stepArrow"></el-image>
                        <div class="stepDes" v-if="currentStep==4">市委组织部初审</div>
                        <div v-else>市委组织部初审</div>
                    </template>
                </el-step>
                <el-step>
                    <template slot="icon">
                        <el-image src="static/rankProgress/stepSix.png"></el-image>
                    </template>
                    <template slot="title">
                        <el-image src="static/rankProgress/passCityMeet.png" class="stepTitle" v-if="currentStep>5" @click="stepDetails(5)"></el-image>
                        <el-image src="static/rankProgress/currentCityMeet.png" class="stepTitle" v-if="currentStep==5" @click="stepDetails(5)"></el-image>
                        <el-image src="static/rankProgress/cityMeet.png" class="stepTitle" v-if="currentStep<5"></el-image>
                        <el-image :src="currentStep > 5?stepArrowSrcActive:stepArrowSrc" class="stepArrow"></el-image>
                        <div class="stepDes" v-if="currentStep==5">部务会研究决定</div>
                        <div v-else>部务会研究决定</div>
                    </template>
                </el-step>
                <el-step>
                    <template slot="icon">
                        <el-image src="static/rankProgress/stepSeven.png"></el-image>
                    </template>
                    <template slot="title">
                        <el-image src="static/rankProgress/passRankCertificate.png" class="lastStepTitle" v-if="currentStep>6" @click="stepDetails(6)"></el-image>
                        <el-image src="static/rankProgress/currentRankCertificate.png" class="lastStepTitle" v-if="currentStep==6" @click="stepDetails(6)"></el-image>
                        <el-image src="static/rankProgress/rankCertificate.png" class="lastStepTitle" v-if="currentStep<6"></el-image>
                        <div class="stepDes" v-if="currentStep==6">颁发职级证书</div>
                        <div v-else>颁发职级证书</div>
                    </template>
                </el-step>
            </el-steps>
        </div>
        <div class="outCardContent" style="min-height: 500px" v-loading="contentLoad">
           <!-- <el-button type="primary" @click='nextStep()'>下一步</el-button>
            <el-button type="primary" @click='first()'>第一步</el-button>-->
            <!--发布-->
            <div class="stepOneContent" v-if="clickStep===0">
                <h3 class="stepTip">Step1:发布</h3>
                <div style="text-align: center">
                    <el-image src="static/rankProgress/noTask.png"></el-image>
                </div>
            </div>
            <!--个人申请-->
            <div class="stepOneContent" v-if="clickStep===1">
                <h3 class="stepTip">Step2:个人申请</h3>
                <div>
                    <h3 style="display: inline-block;text-align: left;color: #50BC8C">
                        当前镇:{{user.sysDistrict.districtName}}<i class="el-icon-caret-right"></i>
                    </h3>
                    <div style="float: right">
                        <el-image src="static/rankProgress/down.png" @click="downExecute()"> </el-image>
                    </div>
                </div>
                <hr style="width: 100%;border-bottom:1px solid #50BC8C;margin: 10px 1px"/>
                <div style="clear:both;">
                    <div class="stepLabel">职级晋升人员名单:</div>
                    <div v-for="item in executeList" :key="item.id" class="singleCard">
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/leveOne.png')" v-if="item.purposeLevelName=='一级专职村书记'">
                            <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                            <div class="confirmName">{{item.cadresName}}</div>
                        </div>
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/leveTwo.png')" v-if="item.purposeLevelName=='二级专职村书记'">
                            <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                            <div class="confirmName">{{item.cadresName}}</div>
                        </div>
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/leveThree.png')" v-if="item.purposeLevelName=='三级专职村书记'">
                            <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                            <div class="confirmName">{{item.cadresName}}</div>
                        </div>
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/leveFour.png')" v-if="item.purposeLevelName=='四级专职村书记'">
                            <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                            <div class="confirmName">{{item.cadresName}}</div>
                        </div>
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/leveFive.png')" v-if="item.purposeLevelName=='五级专职村书记'">
                            <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                            <div class="confirmName">{{item.cadresName}}</div>
                        </div>
                    </div>
                    <div style="min-height: 60px">
                        <div class="upFileLabel">个人申请材料：</div>
                        <FileUpload :value="currentTaskObject.applyFiles" :disabled="!(currentTaskObject.status==0)"  @getValue="currentTaskObject.applyFiles = $event" class="upFileBtn"></FileUpload>
                    </div>
                    <div class="submitBtn" v-if="currentTaskObject.status==0">
                        <el-button type="success" @click="handleObjectStatus(1)">提交申请</el-button>
                    </div>
                </div>
            </div>
            <!--考察审查-->
            <div class="stepOneContent" v-if="clickStep===2">
                <h3 class="stepTip">Step3:考察审查</h3>
                <div>
                    <h3 style="display: inline-block;text-align: left;color: #50BC8C">
                        当前镇:{{user.sysDistrict.districtName}}<i class="el-icon-caret-right"></i>
                    </h3>
                </div>
                <hr style="width: 100%;border-bottom:1px solid #50BC8C;margin: 10px 1px"/>
                <div style="clear:both;">
                    <div class="stepLabel">职级晋升人员名单:</div>
                    <div v-for="item in executeList" :key="item.id" class="singleCard">
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/leveOne.png')" v-if="item.purposeLevelName=='一级专职村书记'">
                            <div class="confirmCun">{{item.postName}}</div>
                            <div class="confirmName">{{item.cadresName}}</div>
                        </div>
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/leveTwo.png')" v-if="item.purposeLevelName=='二级专职村书记'">
                            <div class="confirmCun">{{item.postName}}</div>
                            <div class="confirmName">{{item.cadresName}}</div>
                        </div>
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/leveThree.png')" v-if="item.purposeLevelName=='三级专职村书记'">
                            <div class="confirmCun">{{item.postName}}</div>
                            <div class="confirmName">{{item.cadresName}}</div>
                        </div>
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/leveFour.png')" v-if="item.purposeLevelName=='四级专职村书记'">
                            <div class="confirmCun">{{item.postName}}</div>
                            <div class="confirmName">{{item.cadresName}}</div>
                        </div>
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/leveFive.png')" v-if="item.purposeLevelName=='五级专职村书记'">
                            <div class="confirmCun">{{item.postName}}</div>
                            <div class="confirmName">{{item.cadresName}}</div>
                        </div>
                    </div>
                    <div style="min-height: 60px;">
                        <div class="upFileLabel">考察审查材料：</div>
                        <FileUpload :value="currentTaskObject.reviewFiles" :disabled="!(currentTaskObject.status==1)"  @getValue="currentTaskObject.reviewFiles = $event" class="upFileBtn"></FileUpload>
                    </div>
                    <div class="submitBtn" v-if="currentTaskObject.status==1">
                        <el-button type="success" @click="handleObjectStatus(2)">提交审查</el-button>
                    </div>
                </div>
            </div>
            <!--镇党委会研究-->
            <div class="stepTwoContent" v-if="clickStep===3" style="vertical-align: top;text-align: left">
                <h3 class="stepTip">Step4:镇党委会研究</h3>
                <div style="display: flex">
                    <div class="twoDetail" >
                        <h4>符合调整职级的村书记名单</h4>
                        <div v-for="(item,index) in executeList" :key="item.id" class="singleCard" @click="handleCardBg(item)">
                            <div class="singleCardBg" v-if="item.purposeLevelName=='一级专职村书记'"
                                 :style="{background: item.status==0?'url(\'../../static/rankProgress/leveOne.png\')':'url(\'../../static/rankProgress/rankOne.png\')'}">
                                <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                                <div class="confirmName">{{item.cadresName}}</div>
                            </div>
                            <div class="singleCardBg" v-if="item.purposeLevelName=='二级专职村书记'"
                                 :style="{background: item.status==0?'url(\'../../static/rankProgress/leveTwo.png\')':'url(\'../../static/rankProgress/rankTwo.png\')'}">
                                <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                                <div class="confirmName">{{item.cadresName}}</div>
                            </div>
                            <div class="singleCardBg" v-if="item.purposeLevelName=='三级专职村书记'"
                                 :style="{background: item.status==0?'url(\'../../static/rankProgress/leveThree.png\')':'url(\'../../static/rankProgress/rankThree.png\')'}">
                                <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                                <div class="confirmName">{{item.cadresName}}</div>
                            </div>
                            <div class="singleCardBg" v-if="item.purposeLevelName=='四级专职村书记'"
                                 :style="{background: item.status==0?'url(\'../../static/rankProgress/leveFour.png\')':'url(\'../../static/rankProgress/rankFour.png\')'}">
                                <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                                <div class="confirmName">{{item.cadresName}}</div>
                            </div>
                            <div class="singleCardBg" v-if="item.purposeLevelName=='五级专职村书记'"
                                 :style="{background: item.status==0?'url(\'../../static/rankProgress/leveFive.png\')':'url(\'../../static/rankProgress/rankFive.png\')'}">
                                <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                                <div class="confirmName">{{item.cadresName}}</div>
                            </div>
                        </div>
                        <div style="text-align: right" v-if="currentTaskObject.status==2">
                            <el-button type="success" @click="confirmSecretary()">确认</el-button>
                        </div>
                        <div style="text-align: left;margin-top: 20px" v-if="currentTaskObject.lastestAuditor">
                            <div class="contentLabel" >市委审核意见：</div>
                            <el-input v-model="currentTaskObject.lastestAdvice" type="textarea" rows="5" cols="8" style="font-size: 16px" disabled></el-input>
                        </div>
                    </div>
                    <div style="margin: 0 30px;width: 1px;background-color: #EAEFF0"></div>
                    <div class="twoDetail">
                        <h4>确认调整职级的村书记名单</h4>
                        <div v-if="selectedList.length===0">
                            <div style="text-align: center">
                                <el-image src="static/rankProgress/noPass.png"></el-image>
                            </div>
                        </div>
                        <div v-for="item in selectedList" :key="item.id" class="singleCard">
                            <div class="singleCardBg" style="background: url('../../static/rankProgress/rankOne.png')" v-if="item.purposeLevelName=='一级专职村书记'">
                                <div class="checkCun">{{item.postName.replace(/支部/,'')}}</div>
                                <div class="checkName">{{item.cadresName}}</div>
                            </div>
                            <div class="singleCardBg" style="background: url('../../static/rankProgress/rankOne.png')" v-if="item.purposeLevelName=='二级专职村书记'">
                                <div class="checkCun">{{item.postName.replace(/支部/,'')}}</div>
                                <div class="checkName">{{item.cadresName}}</div>
                            </div>
                            <div class="singleCardBg" style="background: url('../../static/rankProgress/rankOne.png')" v-if="item.purposeLevelName=='三级专职村书记'">
                                <div class="checkCun">{{item.postName.replace(/支部/,'')}}</div>
                                <div class="checkName">{{item.cadresName}}</div>
                            </div>
                            <div class="singleCardBg" style="background: url('../../static/rankProgress/rankOne.png')" v-if="item.purposeLevelName=='四级专职村书记'">
                                <div class="checkCun">{{item.postName.replace(/支部/,'')}}</div>
                                <div class="checkName">{{item.cadresName}}</div>
                            </div>
                            <div class="singleCardBg" style="background: url('../../static/rankProgress/rankOne.png')" v-if="item.purposeLevelName=='五级专职村书记'">
                                <div class="checkCun">{{item.postName.replace(/支部/,'')}}</div>
                                <div class="checkName">{{item.cadresName}}</div>
                            </div>
                        </div>
                        <div style="min-height: 60px">
                            <span class="upFileLabel">镇党委会会议材料:</span>
                            <FileUpload :value="currentTaskObject.resultFiles" :disabled="!(currentTaskObject.status==2)"  @getValue="currentTaskObject.resultFiles = $event" class="upFileBtn"></FileUpload>
                        </div>
                        <div style="text-align: right" v-if="currentTaskObject.status==2">
                            <el-button type="success" @click="handleObjectStatus(3)">确认调整</el-button>
                        </div>
                    </div>
                </div>
            </div>

            <!--市委组织部初审-->
            <div class="stepThreeContent" v-if="clickStep>=4&&user.roleCode =='CITY_LEADER'">
                <h3 class="stepTip" v-if="clickStep==4">Step5:市委组织部初审</h3>
                <h3 class="stepTip" v-if="clickStep==5">Step6:部务会研究决定</h3>
                <h3 class="stepTip" v-if="clickStep==7">Step7:颁发职级证书</h3>
                <div style="display: flex">
                    <div style="width: 65%;padding: 15px 0 0 0" >
                        <div v-for="item in townList">
                            <TownProgress :townObject="item" :objectStatus="objectStatus" @stepDetailVal="handleStepVal" :currentTask="currentTask"></TownProgress>
                        </div>
                    </div>
                    <div style="margin: 0 30px;width: 1px;background-color: #EAEFF0"></div>
                    <div style="width: 30%;text-align: left" v-loading="cityContentLoad">
                        <div class="contentLabel"><span style="color: #d80b33;">
                                    {{selectedTown.objectName.indexOf("党委")>-1?selectedTown.objectName.replace(/党委/,''):selectedTown.objectName}}
                                    </span>职级评定执行情况</div>
                        <div class="checkDiv">
                             <div v-if="clickStep===5">
                                <div>
                                    <div class="upFileLabel">部务会研究决定文件:</div>
                                    <FileUpload :value="currentTask.resultFiles" :disabled="false"  @getValue="currentTask.resultFiles = $event" class="upFileBtn"></FileUpload>
                                </div>
                                <div class="submitBtn">
                                    <el-button type="success" @click="cityMeetConfirm()">确认</el-button>
                                </div>
                            </div>
                            <div v-if="selectedTown.step">
                                <h4 class="stepTip">{{selectedTown.step}}</h4>
                                <!--镇个人申请-->
                                <div>
                                    <div v-show="selectedTown.stepVal==2">
                                        <div class="contentLabel">个人申请材料：</div>
                                        <FileUpload :value="selectedTown.applyFiles" :disabled="true"  @getValue="selectedTown.applyFiles = $event" class="upFileBtn" ></FileUpload>
                                    </div>
                                    <div v-show="selectedTown.stepVal==3">
                                        <div class="contentLabel">考察审查材料：</div>
                                        <FileUpload :value="selectedTown.reviewFiles" :disabled="true"  @getValue="selectedTown.reviewFiles = $event" class="upFileBtn" ></FileUpload>
                                    </div>
                                    <div v-show="selectedTown.stepVal==4">
                                        <div class="contentLabel">镇党委会研究材料：</div>
                                        <FileUpload :value="selectedTown.resultFiles" :disabled="true"  @getValue="selectedTown.resultFiles = $event" class="upFileBtn" ></FileUpload>
                                    </div>
                                    <div v-show="selectedTown.stepVal==7">
                                        <div class="contentLabel">颁发职级证书材料：</div>
                                        <FileUpload :value="selectedTown.rewardFiles" :disabled="true"  @getValue="selectedTown.rewardFiles = $event" class="upFileBtn" ></FileUpload>
                                    </div>
                                    <div v-for="item in townDetailList" :key="item.id" class="citySingleCard">
                                        <div class="singleCardBg" v-if="item.purposeLevelName=='一级专职村书记'"
                                             :style="{background: item.status==0?'url(\'../../static/rankProgress/leveOne.png\')':'url(\'../../static/rankProgress/rankOne.png\')'}">
                                            <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                                            <div class="confirmName">{{item.cadresName}}</div>
                                        </div>
                                        <div class="singleCardBg" v-if="item.purposeLevelName=='二级专职村书记'"
                                             :style="{background: item.status==0?'url(\'../../static/rankProgress/leveTwo.png\')':'url(\'../../static/rankProgress/rankTwo.png\')'}">
                                            <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                                            <div class="confirmName">{{item.cadresName}}</div>
                                        </div>
                                        <div class="singleCardBg" v-if="item.purposeLevelName=='三级专职村书记'"
                                             :style="{background: item.status==0?'url(\'../../static/rankProgress/leveThree.png\')':'url(\'../../static/rankProgress/rankThree.png\')'}">
                                            <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                                            <div class="confirmName">{{item.cadresName}}</div>
                                        </div>
                                        <div class="singleCardBg" v-if="item.purposeLevelName=='四级专职村书记'"
                                             :style="{background: item.status==0?'url(\'../../static/rankProgress/leveFour.png\')':'url(\'../../static/rankProgress/rankFour.png\')'}">
                                            <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                                            <div class="confirmName">{{item.cadresName}}</div>
                                        </div>
                                        <div class="singleCardBg" v-if="item.purposeLevelName=='五级专职村书记'"
                                             :style="{background: item.status==0?'url(\'../../static/rankProgress/leveFive.png\')':'url(\'../../static/rankProgress/rankFive.png\')'}">
                                            <div class="confirmCun">{{item.postName.replace(/支部/,'')}}</div>
                                            <div class="confirmName">{{item.cadresName}}</div>
                                        </div>
                                    </div>
                                </div>
                                <!--审核镇界面-->
                                <div v-show="selectedTown.stepVal==0">
                                    <div style="margin: 15px">
                                        <div class="contentLabel">审核意见:</div>
                                        <el-input v-model="checkAdvice" type="textarea" rows="12" cols="10"></el-input>
                                        <div style="text-align: right;margin-top: 15px">
                                            <el-button @click="checkTown('SUCCESS')">通过</el-button>
                                            <el-button @click="checkTown('FAILED')">驳回</el-button>
                                        </div>
                                    </div>
                                </div>
                                <!--查看审核界面-->
                                <br/>
                                <div v-show="selectedTown.stepVal==5">
                                    <div style="margin: 15px">
                                        <div class="contentLabel">市委审核意见:</div>
                                        <el-input v-model="selectedTown.lastestAdvice" type="textarea" rows="5" cols="9" disabled></el-input>
                                    </div>
                                </div>
                            </div>
                            <div v-else class="emptyImgStyle">
                                <el-image src="static/rankProgress/noTown.png" ></el-image>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="stepOneContent" v-if="clickStep===4&&user.roleCode !=='CITY_LEADER'">
                <h3 class="stepTip">Step5:市委组织部初审</h3>
                <!--未审核镇用户情况-->
                <div style="text-align: center" v-if="currentTaskObject.status==3">
                    <el-image src="static/rankProgress/cityCheckOn.png"></el-image>
                </div>
                <!--审核完成镇用户情况-->
                <div style="text-align: left" v-if="currentTaskObject.status>=4">
                    <div class="stepLabel">职级晋升人员名单:</div>
                    <div v-for="item in selectedList" :key="item.id" class="singleCard">
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/rankOne.png')" v-if="item.purposeLevelName=='一级专职村书记'">
                            <div class="checkCun">{{item.postName}}</div>
                            <div class="checkName">{{item.cadresName}}</div>
                        </div>
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/rankOne.png')" v-if="item.purposeLevelName=='二级专职村书记'">
                            <div class="checkCun">{{item.postName}}</div>
                            <div class="checkName">{{item.cadresName}}</div>
                        </div>
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/rankOne.png')" v-if="item.purposeLevelName=='三级专职村书记'">
                            <div class="checkCun">{{item.postName}}</div>
                            <div class="checkName">{{item.cadresName}}</div>
                        </div>
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/rankOne.png')" v-if="item.purposeLevelName=='四级专职村书记'">
                            <div class="checkCun">{{item.postName}}</div>
                            <div class="checkName">{{item.cadresName}}</div>
                        </div>
                        <div class="singleCardBg" style="background: url('../../static/rankProgress/rankOne.png')" v-if="item.purposeLevelName=='五级专职村书记'">
                            <div class="checkCun">{{item.postName}}</div>
                            <div class="checkName">{{item.cadresName}}</div>
                        </div>
                    </div>
                    <div>
                        <div style="margin: 15px">
                            <div class="contentLabel">市委审核意见:</div>
                            <el-input v-model="currentTaskObject.lastestAdvice" type="textarea" rows="5" cols="9" disabled></el-input>
                        </div>
                    </div>
                    <div></div>
                </div>
            </div>
            <!--镇部务会研究决定-->
            <div class="stepOneContent" v-if="clickStep===5&&user.roleCode !=='CITY_LEADER'">
                <h3 class="stepTip">Step6:部务会研究决定</h3>
                <div v-if="!currentTask.resultFiles">
                    <el-image src="static/rankProgress/cityMeetOn.png"></el-image>
                </div>
                <div v-else>
                    <div>
                        <div class="contentLabel">部务会研究决定文件：</div>
                        <FileUpload :value="currentTask.resultFiles" :disabled="true"  @getValue="currentTask.resultFiles = $event" class="upFileBtn" ></FileUpload>
                    </div>
                </div>
            </div>
            <!--颁发证书-->
            <div class="stepOneContent" v-if="clickStep>=6&&user.roleCode !=='CITY_LEADER'">
                <h3 class="stepTip">Step7:颁发职级证书</h3>
                <div>
                    <div class="contentLabel">颁发职级证书：</div>
                    <FileUpload :value="currentTaskObject.rewardFiles" :disabled="!(currentTaskObject.status==4)"  @getValue="currentTaskObject.rewardFiles = $event" class="upFileBtn" ></FileUpload>
                </div>
                <div class="submitBtn" v-if="currentTaskObject.status==4">
                    <el-button type="primary" @click="handleObjectStatus(5)">提交</el-button>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
    import FileUpload from "@/components/FileUpLoad";
    import TownProgress from "@/components/TownProgress";
    export default {
        name: "RankAdjustment",
        data(){
            return{
                user:{},
                currentStep:1,
                currentTask:{},
                currentTaskObject:{},
                executeList:[],
                selectedList:[],
                townList:[],
                townName:'',
                townDistrictId:'',
                checkTownList:[],
                checkAdvice:'',
                contentLoad:false,
                clickStep:0,
                selectedTown:{step:'',objectName:'',stepVal:''},
                townDetailList:[],
                objectStatus:'',//向子传值
                cityContentLoad:false,
                townStepLoad:false,
                stepArrowSrc:'static/rankProgress/stepArrowHeadActive.png',
                stepArrowSrcActive:'static/rankProgress/stepArrowHead.png'
            }
        },
        methods:{
            nextStep(){
                this.currentStep++;
                this.clickStep = this.currentStep;
            },
            first(){
                this.currentStep=0;
                this.clickStep = 0;
            },
            //判断当前有无任务，锁定任务对象
            showTask(){
                this.$http("POST", '/identity/cadreTask/getCurrentTask/职级评定', {}, false).then(data=>{
                    if(data){
                        this.currentTask = data;
                        if(this.user.roleCode=='TOWN_REVIEWER'){
                            this.currentStep = 0;
                            this.clickStep = 0;
                            this.showTaskObject(data.id,this.user.districtId);
                        }else if(this.user.roleCode=='CITY_LEADER'){
                            //拉取当前所有执行任务的镇
                            this.allTownExecuteList(data.id);
                            //当前任务是否审核完成
                            if(data.currentPercent==1){
                                if(data.resultFiles){
                                    this.currentStep = 7;
                                    this.clickStep = 7;
                                }else{
                                    this.currentStep = 5;
                                    this.clickStep = 5;
                                }
                            }else{
                                this.currentStep = 4;
                                this.clickStep = 4;
                            }
                        }
                    }else{
                        this.currentStep = 0;
                        this.clickStep = 0;
                    }
                })
            },
            showTaskObject(taskId,districtId){
                this.$http("POST", '/identity/cadreTaskObject/list', {taskId:taskId, objectId: districtId}, false).then(data=>{
                    this.currentTaskObject = data[0];
                    if(data.length>0){
                        if(this.user.roleCode==='TOWN_REVIEWER'){
                            if(this.currentTaskObject.status==0){
                                this.currentStep = 1;
                                this.clickStep = 1;
                                this.showExecuteList();
                            }else if(this.currentTaskObject.status == 1){
                                this.currentStep = 2;
                                this.clickStep = 2;
                                this.showExecuteList();
                            }else if(this.currentTaskObject.status == 2){
                                this.currentStep = 3;
                                this.clickStep = 3;
                                this.showExecuteList();
                                this.showSelectedList();
                            }else if(this.currentTaskObject.status == 3){
                                this.currentStep = 4;
                                this.clickStep = 4;
                            }else if(this.currentTaskObject.status == 4 && (!this.currentTask.resultFiles)){
                                this.currentStep = 5;
                                this.clickStep = 5;
                            }else if(this.currentTaskObject.status == 4 && this.currentTask.resultFiles){
                                this.currentStep = 6;
                                this.clickStep = 6;
                            }else if(this.currentTaskObject.status == 5 ){
                                this.currentStep = 7;
                                this.clickStep = 7;
                            }
                        }else if(this.user.roleCode=='CITY_LEADER'){
                            if(this.currentStep>=4){
                                /*if(this.currentTaskObject.status>=2){
                                    this.$http('POST',`identity/promotionCadres/list`,{townId:this.townDistrictId,enable:1,status:1},false).then(data=>{
                                        this.checkTownList = data;
                                    })
                                }else{
                                    this.checkTownList = [];
                                }*/
                            }
                        }
                    }
                });
            },

            //提交修改object的状态
            handleObjectStatus(status){
                this.currentTaskObject.status = status;
                this.contentLoad = true;
                this.$http('PUT', `identity/cadreTaskObject/${this.currentTaskObject.id}id`,this.currentTaskObject,false).then(data=>{
                    this.contentLoad = false;
                    this.$message({
                        type:'success',
                        message:'提交成功'
                    });
                    if(status==5){
                        this.currentStep = 7;
                        this.clickStep = 7;
                    }else{
                        this.currentStep = status+1;
                        this.clickStep = status+1;
                    }
                })
            },
            showExecuteList(townId){
                let para = {};
                if(townId){
                    para = {townId:townId,enable:1,taskId:this.currentTask.id}
                }else{
                    para = {townId:this.user.districtId,enable:1,taskId:this.currentTask.id}
                }
                this.$http('POST',`identity/promotionCadres/list`,para,false).then(data=>{
                    if(townId){
                        this.townDetailList = data;
                    }else{
                        this.executeList = data;
                    }
                });
            },
            handleCardBg(item){
                if(this.currentTaskObject.status==2){
                    if(item.status==1){
                        item.status = 0;
                    }else if(item.status==0){
                        item.status = 1;
                    }
                }
            },
            showSelectedList(districtId){
                let para = {enable:1,status:1,taskId:this.currentTask.id};
                if(districtId){
                    para.townId = districtId;
                }else{
                    para.townId = this.user.districtId;
                }
                this.$http('POST',`identity/promotionCadres/list`,para,false).then(data=>{
                    if(districtId){
                        this.townDetailList = data;
                    }else{
                        this.selectedList = data;
                    }
                })
            },
            //镇下载名单
            downExecute(){
                this.$http('GET',`identity/villageCadres/downloadPromotion?taskId=${this.currentTask.id}&districtId=${this.user.districtId}`,false).then(data=>{
                    window.open(data);
                    this.$message({
                        type:'success',
                        message:'下载成功！'
                    });
                });
            },
            //确认调级名单
            confirmSecretary(){
                this.selectedList = [];
                let para = [];
                let para0 = [];
                this.executeList.forEach(item=>{
                    if(item.status==1){
                        this.selectedList.push(item);
                        para.push(item.id)
                    }else if(item.status==0){
                        para0.push(item.id);
                    }
                });
                this.$http('POST',`identity/promotionCadres/filterPromotion?status=1`,para,false).then(data=>{});
                this.$http('POST',`identity/promotionCadres/filterPromotion?status=0`,para0,false).then(data=>{})
            },
            handleStepVal(val){
                this.selectedTown = val;
                this.cityContentLoad = true;
                if(val.stepVal==2){//个人申请
                    this.showExecuteList(val.objectId);
                }else if(val.stepVal==3){//考察审查
                    this.showExecuteList(val.objectId);
                }else if(val.stepVal==4){//镇党委会研究
                    this.showSelectedList(val.objectId);
                }else if(val.stepVal==0){//市委审核
                    this.showSelectedList(val.objectId);
                } else if(val.stepVal==5){//组织部初审
                    this.showSelectedList(val.objectId);
                }else if(val.stepVal==6){//部务会研究决定
                    this.showSelectedList(val.objectId);
                }else if(val.stepVal==7){//颁发证书
                    this.showSelectedList(val.objectId);
                }
                setTimeout(()=>{
                    this.cityContentLoad = false;
                },1000);
            },
            //市委拉取发布任务的镇
            allTownExecuteList(taskId){
                this.$http('POST',`identity/cadreTaskObject/list`,{taskId:taskId},false).then(data=>{
                    this.townList = data;
                })
            },
            //市委审核当前镇
            checkTown(status){
                let objectId = this.selectedTown.id;
                this.$http("get", `identity/cadreTaskObject/progressNext?taskObjectId=${objectId}&isSuccess=${status}&auditor=组织部&auditAdvice=${this.checkAdvice}`,false).then(data=>{
                    if(status=='SUCCESS'){
                        this.objectStatus = "a"+this.selectedTown.status++;
                        this.showTask();
                    }else{
                        this.objectStatus = "b"+this.selectedTown.status--;
                    }
                    this.$message({
                        type:'success',
                        message:'审核成功'
                    });
                    this.allTownExecuteList(this.currentTask.id);
                    this.selectedTown.step='';
                    this.checkAdvice = '';
                   /* this.cityHandleTown(this.townDistrictId);*/
                })
            },
            //市委提交部务会研究材料
            cityMeetConfirm(){
                if(this.currentTask.resultFiles){
                    this.$http('PUT', `/identity/cadreTask/${this.currentTask.id}id`, this.currentTask, false).then(data=>{
                        this.submitRank();
                        this.$message({
                            type:'success',
                            message:'部务会研究材料提交完成！'
                        });
                        this.currentStep = 7;
                        this.clickStep = 7;
                        this.objectStatus = '部务会研究材料已提交';
                    })
                }else{
                    this.$message({
                        type:'warning',
                        message:'请上传部务会研究决定！'
                    });
                }
            },
            //处理流程点击事件
            stepDetails(step){
                if(this.user.roleCode=='TOWN_REVIEWER'){
                    this.contentLoad = true;
                    this.clickStep = step;
                    if(step==1||step==2){
                        this.showExecuteList();
                    }else if(step==3){
                        this.showExecuteList();
                        this.showSelectedList();
                    }else if(step==4){
                        this.showSelectedList();
                    }else if(step==5){
                        this.showSelectedList();
                    }else if(step==6){
                    }
                    setTimeout(()=>{
                        this.contentLoad = false;
                    },1000)
                }
            },
            /*市委部务会研究决定之后评级*/
            submitRank(){
                this.$http('GET',`identity/promotionCadres/upgrade?taskId=${this.currentTask.id}`,false).then(data=>{
                });
            }
        },
        components:{
            FileUpload,
            TownProgress,
        },
        created() {
            this.user = JSON.parse(sessionStorage.getItem("userInfo"));
            this.showTask();
        }
    }
</script>

<style>
    .rankAdjustment .outCard .el-step__head.is-finish{
        border: transparent;
    }
    .rankAdjustment .outCard .el-step__head.is-process{
        border: transparent;
    }
    .rankAdjustment .outCard .el-step__head.is-wait{
        border: transparent;
    }
    .rankAdjustment .outCard .el-step__title.is-finish {
        color: #55BD94;
        font-weight: bold;
        font-size: 16px;
    }
    .rankAdjustment .outCard .el-step__title.is-process  {
        color: #bcbec2;
    }
    .rankAdjustment .outCard .el-step__icon{
        width: 30px;
        height: 30px;
    }
    .rankAdjustment .outCard .el-step__title:hover{
        cursor: pointer;
    }
    .rankAdjustment .outCard .el-step.is-horizontal .el-step__line{
        height: 1px;
        top: 14px;
    }
    .rankAdjustment .outCard .el-button--mini, .el-button--mini.is-round{
        padding: 15px !important;
    }
    .rankAdjustment .el-button--mini, .el-button--mini.is-round{
        padding: 10px 15px;
    }
    .rankAdjustment .el-button--mini, .el-button--mini.is-round{
        font-size: 14px;
    }

</style>

<style scoped>
    .rankAdjustment .outCard{
        margin: 15px 0;
        background: #fff;
        border:#DBEFE6 1px solid;
        -moz-box-shadow: 2px 2px 10px #DEF2E9;
        -webkit-box-shadow: 2px 2px 10px #DEF2E9;
        box-shadow:2px 2px 10px #DEF2E9;
    }
    .rankAdjustment .outCardContent{
        margin: 15px 0;
        background: #fff;
        border:#DBEFE6 1px solid;
        -moz-box-shadow: 2px 2px 10px #DEF2E9;
        -webkit-box-shadow: 2px 2px 10px #DEF2E9;
        box-shadow:2px 2px 10px #DEF2E9;
    }
    .rankAdjustment .stepTitle{
        margin-top: 10px;
        width: 48px;
        height: 48px;
        margin-left: 31px;
    }
    .rankAdjustment .lastStepTitle{
        margin-top: 10px;
        width: 48px;
        height: 48px;
    }
    .rankAdjustment .executeCard{
        display: inline-block;
        width: 150px;
        height: 100px;
        margin:5px 5px;
        border-radius: 5px;
        text-align: left!important;
        background-color:#E7E9EF;
        color: #74757c;
        font-size: 15px;
        line-height: 25px;
    }
    .rankAdjustment .stepOneContent{
        width: 960px;
        margin: 40px calc((100% - 960px) / 2);
        text-align: left;
    }
    .rankAdjustment .stepOneContent .el-card__body {
        padding: 10px 20px;
    }
    .rankAdjustment .stepTwoContent{
        padding: 30px 20px;
    }
    .rankAdjustment .stepTwoContent .twoDetail{
        width: calc((100% - 80px - 1px) / 2);

    }
    .rankAdjustment .stepThreeContent{
        padding: 30px 20px;
    }
    .rankAdjustment .checkDiv{
        border:#DDF1E8 1px solid;
        background:#F6F9F8;
        -moz-box-shadow: 2px 2px 10px #DDF1E8;
        -webkit-box-shadow: 2px 2px 10px #DDF1E8;
        box-shadow:2px 2px 10px #DDF1E8;
        padding: 15px;
    }
    .rankAdjustment .checkCun{
        line-height: 45px;
        margin-left: 10px;
        color: #fff;
    }
    .rankAdjustment .checkName{
        line-height: 50px;
        margin-left: 10px;
        font-size: 15px;
        color: #fff;
    }
    .rankAdjustment .confirmCun{
        line-height: 45px;
        margin-left: 10px;
        color: #000;
    }
    .rankAdjustment .confirmName{
        line-height: 50px;
        margin-left: 10px;
        font-size: 15px;
        color: #000;
    }
    .rankAdjustment .cityMeetContent{
        margin-top: 50px;
        margin-bottom: 20px;
        clear:both;
        font-size: 14px;
        font-weight: bold;
        min-height: 250px;
        border:#DDF1E8 1px solid;
        background:#F6F9F8;
        -moz-box-shadow: 2px 2px 10px #DDF1E8;
        -webkit-box-shadow: 2px 2px 10px #DDF1E8;
        box-shadow:2px 2px 10px #DDF1E8;
        padding: 5px;
    }
    .rankAdjustment .el-table tbody tr:hover>td {
        background-color:#ffffff!important
    }
    .rankAdjustment .citySingleCard{
        display: inline-block;
        width: 135px;
        height: 95px;
        margin: 5px;
        font-size: 14px;
        font-weight: bold;
        text-align: left;
    }
    .rankAdjustment .singleCard{
        display: inline-block;
        width: 135px;
        height: 95px;
        margin: 5px;
        font-size: 14px;
        font-weight: bold;
        text-align: left;
    }
    .rankAdjustment .singleCardBg{
        width: 100%;
        height: 100%;
    }
    .rankAdjustment .submitBtn{
        text-align: right;
    }
    .rankAdjustment .upFileLabel{
        text-align: left;
        line-height: 32px;
        font-weight: bold;
    }
    .rankAdjustment .upFileBtn{
        margin-left: 0px;
        width: 150px;
        text-align: left;
    }
    .rankAdjustment .contentLabel{
        line-height: 36px;
        font-weight: bold;
        font-size: 18px;
        text-align: left;
    }
    .rankAdjustment .stepTip{
        text-align: left;
        color: #50BC8C;
        margin-bottom: 10px;
    }
    .rankAdjustment .stepLabel{
        margin: 15px 0;
        text-align: left;
    }
    .rankAdjustment .stepArrow{
        position: relative;
        left: 80px;
    }
    .rankAdjustment .emptyImgStyle{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .rankAdjustment .stepDes{
        color: #4080f6;
    }
</style>
